<template>
  <div class="swipe">
     <van-swipe class="swipe-list" lazy-render :autoplay="3000" indicator-color="white">
      <template v-for="(item, index) in swipeData" :key="index">
        <van-swipe-item class="item">
          <img :src="item.url" alt="">
        </van-swipe-item>
      </template>
      <template #indicator="{ active, total}">
        <div class="indicator">
          <!-- <template v-for="(value, key, index) in swipeGroup" :key="key">
            <span class="item" 
                  :class="{ active: swipeData[active].enumPictureCategory == key }"
             >
             <span class="text">{{ getName(value[0].title) }}</span>
             <span class="count" v-if="swipeData[active]?.enumPictureCategory == key">{{getCategoryIndex(swipeData[active]) }}/{{ value.length }}</span>
            </span>
          </template> -->
          <span>{{ active + 1 }}/{{ total }}</span>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
  const props = defineProps({
    swipeData: {
      type: Array,
      default: () => []
    }
  })
  console.log(props.swipeData)

  //对数据进行转换
  // const swipeGroup = {}
  // for(const item of props.swipeData){
  //   let valueArray = swipeGroup[item.enumPictureCategory]
  //   if(!valueArray) {
  //     valueArray = []
  //     swipeGroup[item.enumPictureCategory] = valueArray
  //   }
  //   valueArray.push(item)
  // }

  // const getName = (name) =>{
  //   return name.replace("：", "").replace("【", "").replace("】","")
  // }

  
</script>

<style lang="less" scoped>
.swipe {
  .swipe-list {
     .item {
       img {
         width: 100%;
       }
     }
  }
}
.indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  // .item {
  //   padding: 2px;
  //   &.active {
  //     margin: 0 2px;
  //     border-radius: 6px;
  //     background-color: #fff;
  //     color: #000;
  //   }
  // }
}
</style>
